<template>
	<view>
		<!-- 返回顶部 -->
		<view class="btn" @tap="toTop" :style="{'display':(flag===false? 'none':'block')}">
			<view class="cuIcon-top">
				<uni-icons type="arrow-up" size="30" color="#20C3FE"></uni-icons>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search">
			<u-search bgColor="#fff" border-color="#20C3FE" search-icon-color="#20C3FE" placeholder="关键词"
				:actionStyle="searchStyle" v-model="keyword" @search="search" @custom="search"
				@focus="search"></u-search>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="swiperList" keyName="image" showTitle :autoplay="true" circular
				@click="swiperClick"></u-swiper>
		</view>

		<!-- 标签 -->
		<view class="grid">
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in gridList" :key="listIndex" @click="gridClick(listIndex)">
<!-- 					<uni-icons class="uni-icon" custom-prefix="custom-icon" :type="listItem.name" size="24"
						color="#1296db"></uni-icons> -->
						<view style="width: 32px;height: 32px;">
							<image style="width: 100%;height: 100%;" :src="listItem.src" mode="aspectFill">
							</image>
						</view>

					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<!-- 卡片 -->
		<view class="recommend-list">
			<u-icon name="heart" color="#20C3FE"></u-icon>
			<text style="margin-left: 10rpx;">推荐列表</text>
		</view>

		<view style="margin: 0 20rpx;">
			<view v-for="(item,index) in recommenderList" @click="cardClick(item.id,item.tags)" :key="index"
				style="border-radius: 20rpx;display: flex;justify-content: center;margin-bottom: 20rpx;padding: 14rpx;background-color: #fff;">
				<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="imgOne(item.pic,item.tags)" mode="aspectFill">
					</image>
				</view>
				<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
					<view style="font-size: 28rpx;margin-bottom: 12rpx;">
						{{item.title}}
					</view>
					<view
						style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
						{{item.tags == '社会资讯' ? delTag(item.content) : item.content}}
					</view>
					<view style="align-self: flex-start;margin-bottom: 12rpx;">
						<text v-if="item.tags == '求职'" class="etcString"
							style="background-color: #20C3FE;">{{item.etcString}}</text>
						<text v-if="item.tags == '招聘'" class="etcString"
							style="background-color: #F9AE3D;">{{item.etcString}}</text>
						<text v-if="item.tags == '房屋'" class="etcString"
							style="background-color: #5AC725;">{{item.etcString}}</text>
						<text v-if="item.tags == '推荐店铺'" class="etcString"
							style="background-color: #FF226B;">{{item.etcString}}</text>
						<text v-if="item.tags == '社会资讯'" class="etcString"
							style="background-color: #DD27DE;">{{item.etcString}}</text>
						<text v-if="item.tags == '周末游'" class="etcString"
							style="background-color: #B1CA79;">{{item.etcString}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{item.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#ff5500" name="thumb-up"></u-icon>
							<text>{{item.up==null||item.up == ''?'0':item.up}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="star" color="#ffaa00"></u-icon>
							<text>{{item.collect}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getSwiperList,
		getSocietyList,
		getStoreList,
		getRecommenderNoLogin,
		getRecommenderOfLogin
	} from '../../config/api'
	export default {
		data() {
			return {
				searchStyle: {
					background: '#20C3FE',
					width: '105rpx',
					borderRadius: '30rpx',
					height: '64rpx',
					fontSize: '28rpx',
					color: '#FFFFFF',
					lineHeight: '64rpx',
					textAlign: 'center'
				},
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}],
				picIsNull: '../../static/picIsNull.png',
				flag: false,
				swiperList: [],
				indexList: [],
				recommenderList: [

				],
				keyword: '',
				gridList: [{
					name: 'custom-icon-zhaopin',
					title: '求职招聘',
					src:'/static/recruit.png'
				}, {
					name: 'custom-icon-fangwufangchan',
					title: '房屋租售',
					src:'/static/house.png'
				}, {
					name: 'custom-icon-dianpu',
					title: '推荐店铺',
					src:'/static/shop.png'
				}, {
					name: 'custom-icon-zixun',
					title: '社会资讯',
					src:'/static/leida.png'
				}, {
					name: 'custom-icon-xiuxian',
					title: '旅行游记',
					src:'/static/Beach.png'
				}, {
					name: 'custom-icon-qiche',
					title: '同城拼车',
					src:'/static/Taxi.png'
				}, {
					name: 'custom-icon-zhengfu',
					title: '政务服务',
					src:'/static/government.png'
				}],
			}
		},
		onLoad() {
			this.init()
			if (!this.getIsLogin) { //*代表新增未完全				 
				//未登录
				this.getRecommenderNoLogin()
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				//登录
				this.getRecommenderOfLogin()
			}

		},
		onShow() {
			if (!this.getIsLogin) { //*代表新增未完全
				//未登录
				this.getRecommenderNoLogin()

			} else {
				//登录
				this.getRecommenderOfLogin()
			}
		},
		computed: {
			...mapGetters(['getNeedAuth', 'getIsLogin', 'getUserinfo', 'getBaseUrl'])
		},
		onPullDownRefresh() {
			wx.showLoading({
				title: '刷新中...',
			}) //加载中
			this.init()
			if (!this.getIsLogin) { //*代表新增未完全
				//未登录
				this.getRecommenderNoLogin()

			} else {
				//登录
				this.getRecommenderOfLogin()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
				wx.hideLoading()
			}, 1000);
		},
		methods: {
			//移除HTML标签
			delTag(str) {
				return str.replace(/<[^>]+>/g, "");
			},
			...mapActions(['login', 'authUserInfo']),
			init() {
				//获取swiper
				getSwiperList().then(res => {
					this.swiperList = res.data.data.map(item => {
						return {
							id: item.id,
							image: this.getBaseUrl + item.img,
							title: item.title
						}
					})
				});
				// this.login(); 
			},
			// 获取推荐列表-未登录
			getRecommenderNoLogin() {
				getRecommenderNoLogin().then(res => {
					this.recommenderList = res.data.data.map(item => {
						return {
							id: item.id,
							title: item.title,
							content: item.description,
							pic: item.pic,
							lookNum: item.lookNum,
							up: item.up,
							collect: item.collect,
							createTime: item.createTime,
							tags: item.updateBy,
							etcString: item.etcString
						}
						
					})
				})
			},
			// 获取推荐列表-已登录
			getRecommenderOfLogin() {
				getRecommenderOfLogin().then(res => {
					// this.recommenderList = res.data.data
					this.recommenderList = res.data.data.map(item => {
						return {
							id: item.id,
							title: item.title,
							content: item.description,
							pic: item.pic,
							lookNum: item.lookNum,
							up: item.up,
							collect: item.collect,
							createTime: item.createTime,
							tags: item.updateBy,
							etcString: item.etcString
						}
					})
				})
			},

			// 搜索
			search() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			// 返回顶部
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 10) { //当距离大于10时显示回到顶部按钮
					this.flag = true
				} else {
					this.flag = false
				}
			},
			// 取卡片对象的第一张图片
			imgOne(pic, tags) {
				if (pic == null || pic == '') {

					if (tags == '求职') {
						return '/static/standbyLogo/zhao_logo.jpg'
					} else
					if (tags == '招聘') {
						return '/static/standbyLogo/pin_logo.png'
					} else
					if (tags == '房屋') {
						return '/static/standbyLogo/house_logo.png'
					} else
					if (tags == '推荐店铺') {
						return '/static/standbyLogo/store_logo.png'
					} else
					if (tags == '社会资讯') {
						return '/static/standbyLogo/zixun_logo.png'
					} else
					if (tags == '周末游') {
						return '/static/standbyLogo/week_logo.png'
					}

				} else {
					let src = pic.split(",")[0];
					return this.getBaseUrl + src
				}

			},

			// 点击轮播图
			swiperClick(e) {
				let selectId;
				selectId = this.swiperList[e].id
				uni.navigateTo({
					url: `../detail/swiperDetail?id=${selectId}`
				})
			},
			// 点击标签菜单
			gridClick(name) {
				if (name == 0) {
					uni.navigateTo({
						url: '/pages/recruit/recruit'
					})
				} else
				if (name == 1) {
					console.log("i");
					uni.navigateTo({
						url: '/pages/house/houseList'
					})
				} else
				if (name == 2) {
					uni.switchTab({
						url: '/pages/shop/shop'
					})
				} else
				if (name == 3) {
					uni.navigateTo({
						url: '/pages/society/societyList'
					})
				} else
				if (name == 4) {
					uni.navigateTo({
						url: '/pages/weekendTour/weekendList'
					})
				} else
				if (name == 5) {
					uni.navigateTo({
						url: '/pages/carPool/carPool'
					})
				} else
				if (name == 6) {
					uni.navigateTo({
						url: '/pages/governmentUnits/governmentUnits'
					})
				}
			},
			// 点击卡片
			cardClick(id, tag) {
				if (tag == '求职') {
					uni.navigateTo({
						url: `/pages/recruit/jobHuntDetail?id=${id}`
					})
				} else if (tag == '招聘') {
					uni.navigateTo({
						url: `/pages/recruit/recruitDetail?id=${id}`
					})
				} else if (tag == '房屋') {
					uni.navigateTo({
						url: `/pages/house/house?id=${id}`
					})
				} else if (tag == '推荐店铺') {
					uni.navigateTo({
						url: `/pages/shop/shopDetail?id=${id}`
					})
				} else if (tag == '社会资讯') {
					uni.navigateTo({
						url: `/pages/society/society?id=${id}`
					})
				} else if (tag == '周末游') {
					uni.navigateTo({
						url: `/pages/weekendTour/weekendTour?id=${id}`
					})
				}

			}

		}
	}
</script>

<style scoped lang="scss">
	.etcString {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		padding: 8rpx;
		color: #fff;
	}

	.swiper {
		margin: 0 20rpx 10rpx
	}

	.btn {
		position: fixed;
		z-index: 9999;
		right: 16px;
		bottom: 80px;
		background-color: #fff;
		padding: 5px;
		display: none;
		border-radius: 4px;
		opacity: 0.8;
	}

	.btn .cuIcon-top {
		font-size: 40px;
		color: #1296db;
	}



	.grid-img {
		paddingTop: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.grid-text {
		font-size: 13px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.search {
		margin: 10rpx 20rpx;
	}

	.grid {
		.uni-icon {
			padding-top: 20rpx;
		}

		margin: 0 20rpx 0;
	}

	.recommend-list {
		display: flex;
		color: #20C3FE;
		font-size: 30rpx;
		justify-content: center;
		background-color: #FFF;
		align-items: center;
		height: 60rpx;
		margin: 0 20rpx 10rpx;
	}

	
</style>